<template>
    <Header title="竞价投放报告" left-arrow />
    <div class="page">
        <div class="card">
            <img class="img" src="@/assets/img/decorate.png" alt="">
            <div class="title">
                竞价消耗
            </div>
            <div class="case">
                <div>
                    <div class="label">
                        竞价城市（个）
                    </div>
                    <div class="value">
                        {{ data.cityCount }}
                    </div>
                </div>
                <div>
                    <div class="label">
                        竞价成功（台）
                    </div>
                    <div class="value">
                        {{ data.totalBidPoint }}
                    </div>
                </div>
                <div>
                    <div class="label">
                        消耗金额（元）
                    </div>
                    <div class="value">
                        {{ formatNumber(data.totalCost) }}
                    </div>
                </div>
            </div>
            <div class="put-time">
                <span class="icon iconfont icon-fabushijian"></span>
                投放周期：{{ data.beginDate }}~{{ data.endDate }}
            </div>
        </div>

        <div class="card">
            <div class="title">
                投放概况
                <div v-for="(item, index) in data.detail" :key="index" class="item">
                    <div class="topic">
                        <div>
                            <span class="city">{{ item.cityName }}</span>
                            <span class="tag">{{ item.mediaTypeName }}</span>
                            <span class="tag">{{ item.duration }}秒{{ item.frequency }}次</span>
                        </div>
                        <div class="point" @click="pointDetail(item)">
                            点位明细
                        </div>
                    </div>
                    <div class="detail">
                        <div>
                            <div class="label">
                                竞价成功（台）
                            </div>
                            <div class="value">
                                {{ item.bidPoint }}
                            </div>
                        </div>
                        <div>
                            <div class="label">
                                消耗金额（元）
                            </div>
                            <div class="value">
                                {{ formatNumber(item.cost) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <!-- <Button type="primary" plain @click="goHome">
                返回首页
            </Button> -->
            <Button type="primary" @click="toReport">
                获取第三方监播报告
            </Button>
            <div class="van-safe-area-bottom"></div>
        </footer>
    </div>
</template>

<script name="productsBidReport" lang="ts" setup>
import { Button } from 'vant';
import Header from '@/components/Header/index.vue';
import { useRouter } from 'vue-router';
import { formatNumber } from '@/utils/filters';

interface Item {
    strategyId: number;
    resourceOwner: number;
    cityCode: string;
    cityName: string;
    duration: number;
    frequency: number;
    mediaType: number;
    mediaTypeName: string;
    budget: number;
    bidPrice: number;
    bidCost: number;
    cost: number;
    bidPoint: number;
}

interface Data {
    projectId: number;
    cityCount: number;
    totalBidPoint: number;
    totalCost: number;
    beginDate: string;
    endDate: string;
    detail: Item[];
}

const router = useRouter();
const data = JSON.parse((router.currentRoute.value.params.data || '{}') as unknown as string) as Data;

// const goHome = async () => {
//     await router.push({
//         name: 'home'
//     });
// };

const pointDetail = async (item: Item) => {
    await router.push({
        name: 'productsBrandBreakoutResourceDetail',
        query: {
            projectId: data.projectId,
            strategyId: item.strategyId,
            resourceOwner: item.resourceOwner,
            mediaType: item.mediaType,
            isShowShare: 1
        }
    });
};

const toReport = async () => {
    await router.push({
        name: 'productsThirdPartyReport'
    });
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables";

.page {
    box-sizing: border-box;
    padding: 12px;
    background: #f4f4f4;
}
.card {
    position: relative;
    box-sizing: border-box;
    padding: 12px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 12px;
    .img {
        width: 46px;
        height: 42px;
        position: absolute;
        right: 0;
        top: 0;
    }
}
.title {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}
.item {
    border: 0.5px solid #eeeeee;
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 12px;
    .topic {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .city {
            font-weight: 500;
            font-size: 14px;
            color: #333333;
            margin-right: 16px;
        }
        .tag {
            border-radius: 2px;
            font-weight: 400;
            font-size: 11px;
            color: #fd6f00;
            background: rgb(253 111 0 / 10%);
            margin-right: 8px;
            padding: 1px 4px;
        }
        .point {
            font-weight: 400;
            font-size: 13px;
            color: #397ff8;
        }
    }
    .detail {
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
        .label {
            font-weight: 400;
            font-size: 12px;
            color: #848484;
            text-align: center;
        }
        .value {
            font-family: $spec_font;
            font-size: 18px;
            color: #333333;
            text-align: center;
            font-weight: 400;
        }
    }
}
.case {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 0 12px;
    padding: 0 12px;
    box-sizing: border-box;
    .label {
        font-weight: 400;
        font-size: 12px;
        color: #848484;
        text-align: center;
    }
    .value {
        font-family: $spec_font;
        font-size: 18px;
        color: #333333;
        text-align: center;
    }
}
.put-time {
    background-color: #fafafa;
    padding: 8px 12px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 12px;
    color: #5b5b5b;
    line-height: 16px;
    .icon-fabushijian {
        vertical-align: bottom;
    }
}
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 12px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 -2px 4px 0 #ebebeb80;
    z-index: 1;
    .van-button {
        width: 100%;
        // width: 219px;
        height: 38px;
        line-height: 38px;
        background: #e60044;
        border-radius: 6px;
        border: 0;
        font-family: PingFangSC-Medium, sans-serif;
        font-size: 14px;
    }
    :deep([class~="van-button--plain"]) {
        width: 120px;
        margin-right: 12px;
        color: #e60044;
        background: #ffffff;
        border: 0.5px solid #e60044;
    }
}
</style>
